<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>登录</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <link href="${system}/static/css/home.css" rel="stylesheet" type="text/css" media="all"/>
    <!--<link href="css/css.css" rel="stylesheet" type="text/css" media="all" />-->
    <link href="${system}/static/css/mui.min.css" rel="stylesheet"/>
    <link href="${system}/static/css/mui.css"/>
</head>

<style>

    input { -webkit-user-select:text !important }





    body {
        border: 0;
        margin: 0;
        background: #ebebeb;
    }


    html {
        font-family: '微软雅黑';
    }

    img {
        display: block;
    }

    a {
        color: #333;
        text-decoration: none;
    }

    .box {
        width: 94%;
        margin: 0 auto;
    }
</style>

<body style="background:#fff;">


<img src="${system}/static/images/login.png" class="lo_logo" style="width:100px;height: 65px;">

<div class="login_lo">
    <div class="box">
        <div class="lo_1 lo_2">
            <img src="${system}/static/images/yong.png">
            <input type="text" id="phone" placeholder="请输入手机号"
                   style="width:150px; height: 25px; margin-top: 15px; border: none;">
        </div>
        <div class="lo_1 lo_2">
            <img src="${system}/static/images/mi.png">
            <input type="password" id="password" maxlength="16" minlength="6" placeholder="请输入6-16位密码"
                   style="width:170px; height: 25px; margin-top: 15px; border: none;">
        </div>
        <br/>
        <a href="retrieve" style="float: left;">找回密码</a>
        <a href="register" style="float: right;">免费注册</a>
        <a href="#" class="lo_login" id="login">登录</a>
    </div>
</div>

</body>
<script src="${system}/static/js/mui.min.js"></script>
<script src="${system}/static/js/mui.js"></script>

<script>
    var v_phoneNumber = /^1[34578]\d{9}$/; //手机号表达式
    var v_code = /^(\d){6}$/; //验证码表达式
    var v_pwd = /^[\w_-]{6,16}$/;	//密码正则表达式

    $("#login").click(function () {
        var phoneNum = $("#phone").val();	//手机号
        var pwd = $("#password").val();	//密码
        if (!v_phoneNumber.test(phoneNum)) {
            mui.toast("手机号填写错误!");
            return;
        }
        if (!v_pwd.test(pwd)) {
            mui.toast('密码格式错误!');
            return;
        }
        //执行到此处时说明没有问题,可以进行ajax操作
        var url = "${system}/user/login.do";
        var data = {"user_number": phoneNum, "user_password": hex_md5(pwd).toUpperCase()};
        $("#login").text("登录中...");
        ajax(url, data, "text", "post", true, function (data) {
            if (data == "success") {
                window.location.href="${system}/home/index";
            } else {
                $("#login").text("登录");
                mui.toast("登录失败,请检查用户名和密码!");
            }
        }, function (error) {
            $("#login").text("登录");
            console.log(error)
            mui.toast("请检查你的网络设置!");
        });
    });
</script>


</html>